<template>
	<div class="demo">
		<h2>测试</h2>
		
		<el-upload
			class="avatar-uploader"
			drag
			action="http://upload.qiniu.com/"
			:before-upload="beforeUpload"
			:show-file-list="true"
			:data="UploadFileData"
			:on-success="handleSuccess">
			<i class="el-icon-video-camera-solid" ></i>
			<div class="el-upload__tip" slot="tip">单次视频上传不超过500MB</div>
		</el-upload>
	</div>
</template>

<script lang="ts">
	import {Vue, Component} from "vue-property-decorator"
	
	@Component
	export default class demoComponents extends Vue {
		// 上传图片需要发送给 七牛 的数据
		public UploadFileData:Object = {
			token: "0MGmT_rkMiaOeXY09B4EhBnXuDcIYyKlGumQ-zUt:sflcZLDLJEekA405QFGfKGXsL-E=:eyJwZXJzaXN0ZW50UGlwZWxpbmUiOiJndWFpa2VtM3U4IiwicGVyc2lzdGVudE9wcyI6ImF2dGh1bWIvbTN1OC9zZWd0aW1lLzEwL2FiLzEyOGsvYXIvNDQxMDAvYWNvZGVjL2xpYmZhYWMvci8zMC92Yi82NDBrL3Zjb2RlYy9saWJ4MjY0L3N0cmlwbWV0YS8wL25vRG9tYWluLzF8c2F2ZWFzL2JUTjFPSFpwWkdWdk9qRTFOakl4TURFMU9ETXdOREU9Iiwic2NvcGUiOiJndWFpa2V2aWRlbzoyLm1vdiIsImRlYWRsaW5lIjoxNTYyMTA1MTgzfQ==", // token
			key: null    // key 上传到七牛的视频文件名
		};
		
		handleSuccess(res, file) {
			console.log("handleSuccess res: ", res)
			console.log("handleSuccess file: ", file)
		}
		
		public async beforeUpload(file) {
			console.log("beforeUpload file: ", file)
			this.UploadFileData.key = file.name;
		}
	}
</script>

<style scoped lang="less">

</style>